<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
    <%@ include file="/include/head.jsp"%>
    <title></title>
    <link rel="stylesheet" href="${rootPath}/static/plugins/swiper/swiper-3.4.2.min.css">
    <script src="${rootPath}/static/js/mui.pullToRefresh.js"></script>
    <script src="${rootPath}/static/js/mui.pullToRefresh.material.js"></script>
    <script src="${rootPath}/static/js/paginationRequest.js"></script>
    <script src="${rootPath}/static/plugins/swiper/swiper-3.4.2.jquery.min.js"></script>
    <script>
        var dataListUrl="${rootPath}index/recommendProduct.do?";
        //var dataListUrl=interfaces["hospitalList"];
        mui.init();

        //页面基础配置
        $(function(){
            //初始化轮播图
            initFreeSwiper({
                target:".index-banner",
                swiperOption:{
                    autoplay: 3000,
                    loop:true
                }
            });
            initFreeSwiper({
                target:".index-banner2",
                swiperOption:{
                    freeMode : true,
                    slidesPerView :"auto"
                }
            })
        })
    </script>
</head>

<body>
<!-- 主页面标题 -->
<%@ include file="/include/header-index.jsp"%>
<%@ include file="/include/footer-index.jsp"%>
<div class="mui-content" tabNum="1">
    <div class="mui-fullscreen">
        <a class="mui-control-item"></a>
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <%--主体内容开始--%>

                <%--轮播图--%>
                <div class="index-banner">
                    <div class="swiper-wrapper">
                        <c:forEach items="${bannerList}" var="banner">
                            <div class="swiper-slide">
                                <c:if test="${banner.clickType == 2}">
                                    <a href="${rootPath}index/richText.do?id=${banner.id}" >
                                        <img style="width: 100%" src="${banner.img1}" alt="" >
                                    </a>
                                </c:if>
                                <c:if test="${banner.clickType != 2}">
                                    <a href="${banner.url}" >
                                        <img style="width: 100%" src="${banner.img1}" alt="" >
                                    </a>
                                </c:if>
                            </div>
                        </c:forEach>

                    </div>
                </div>
                <div class="index-banner2 qy-padding-horizontal-8 qy-bg-white">
                    <div class="swiper-wrapper">
                        <c:forEach items="${recommendCategoryList}" var="recommendCategory">
                            <div class="swiper-slide qy-text-center" style="width: 20%;">
                                <a href="${recommendCategory.url}">
                                    <img style="width: 80%;display: block;" class="qy-margin-vertical-auto" src="${recommendCategory.img1}" alt="">
                                    <small class="qy-text-black">${recommendCategory.title1}</small>
                                </a>
                            </div>
                        </c:forEach>
                    </div>
                </div>


                <div class="qy-bg-white qy-margin-top-8 qy-padding-horizontal-8">
                    <a href="${rootPath}wap/seller/gotoSellerList.do" class="qy-text-black"><span class="mui-block qy-flex-text-center qy-flex">推荐机构 <small class="qy-icon-rightArrowCircle"></small></span></a>
                    <div class="mui-row qy-padding-top-8">
                        <c:forEach items="${recommendSellerList}" var="seller">
                            <div class="mui-col-xs-3 qy-text-center">
                                <a href="${rootPath}wap/seller/gotoSellerDetail.do?sellerId=${seller.id}" class="qy-text-black">
                                    <div style="width:80%;height:80px;border-radius:12px;overflow:hidden;margin:0 auto;">
                                        <img src="${seller.thumbnailImg}" style="height: 100%" alt="">
                                    </div>
                                    <small class="mui-block nowrap">${seller.name}</small>
                                </a>
                            </div>
                        </c:forEach>
                    </div>


                </div>


                <ul id="vueListBox0" style="" class="mui-table-view qy-margin-top-8px">
                    <li><a href="${rootPath}product/gotoProductList.do" class="qy-text-black qy-margin-top-8"><span class="mui-block qy-bg-white qy-flex-text-center qy-flex qy-padding-top-8px">推荐套餐 <small class="qy-icon-rightArrowCircle"></small></span></a></li>
                    <li class="mui-table-view-cell" v-for="ele in datas">
                        <a style="white-space: normal;" :href="'${rootPath}product/gotoProductDetail.do?productId='+ele.id">
                            <div class="mui-row">
                                <div class="mui-col-xs-3">
                                    <img style="width: 90%;" :src="ele.thumbnailImg" alt=""> </div>
                                <div class="mui-col-xs-9">
                                    <div class="qy-margin-top-4 qy-font-size-18px">{{ele.productName}}</div>
                                    <div class="qy-margin-horizontal-4 font-size-16 qy-text-label">{{ele.sellerName}}</div>
                                    <div class="qy-flex qy-flex-text-between qy-margin-top-8">
                                        <span class="qy-text-red font-size-18"><small>&yen;</small>{{ele.price}}</span>
                                        <small class="qy-text-warning">评分{{ele.commentScore}}</small>
                                    </div>
                                    <div class="qy-flex qy-flex-text-between">
                                        <del class="font-size-12 qy-text-label">&yen;{{ele.originPrice}}</del>
                                        <span class="font-size-16 qy-text-label">{{ele.threeAreaName}}/{{ele.formatDistance}}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>